<template>
	<div class="tag-container" @click="onTap">
		<div class="text" ref="text">{{text}}</div>
		<div class="nums" v-if="nums">+{{nums}}</div>
	</div>
</template>
<script>
export default{
	name:'tag',
	data(){
		return{

		}
	},
	props:{
		text:String,
		nums:Number
	},
	methods:{
		onTap(e){
			this.$emit('tapping',{text:this.$refs.text.innerHTML})
		}
	}
}
	
</script>
<style lang="stylus" scoped>
//tips:虽然设置了scoped，但是最外层div如果和父组件有重名，会有样式覆盖的问题，因此，子组件包裹元素不要和父组件的重名
.tag-container {padding:2px 6px;background-color: #f5f5f5;color: #666666;border-radius: 2px;display: inline-flex;flex-direction: row;align-items: center;justify-content: center;font-size: 14px;margin-right:8px;margin-bottom: 5px;}
.text{display:inline-block;}
.nums{margin-left:5px;font-size:11px;color:#aaa;display:inline-block;}
</style>